<template>
    <div class="filter_page_box" :style="{height: `calc(${bodyHeight - offsetTop}px)`}">
        <div class="filter_content">

            <div class="device_type">
                <span>设备类型</span>
                <select class="iu-select" id="device-option" @change="chooseDeviceType">
                    <option value="-1">全部</option>
                    <option v-for="item in deviceTypeList" :value="item.id">{{item.name}}</option>
                </select>
            </div>

            <!-- <p class="fliter_title" v-if="index == 0">类型</p>
            <div class="cate_button" v-if="index == 0">
                <div class="cate_btn_box">
                    <button :class="deviceSelect ? 'active' : ''" @click="select(1)">设备</button>
                </div>
                <div class="cate_btn_box">
                    <button :class="componentSelect ? 'active' : ''"  @click="select(2)">部件</button>
                </div>
                <div class="cate_btn_box">
                    <button :class="departmentSelect ? 'active' : ''"  @click="select(3)">部门</button>
                </div>
                
            </div> -->

            <p class="fliter_title" v-if="checkSecondTabIndex == undefined">状态</p>
            <div class="cate_button"  v-if="checkSecondTabIndex == undefined">
                <div class="cate_btn_box">
                    <button :class="run ? 'active' : ''" @click="selectStatus2(1)">启用</button>
                </div>
                <div class="cate_btn_box">
                    <button :class="stop ? 'active' : ''"  @click="selectStatus2(2)">暂停</button>
                </div>

                <div class="cate_btn_box">
                    <button :class="forbidden ? 'active' : ''"  @click="selectStatus2(3)">禁用</button>
                </div>
                
            </div>

            <!-- <p class="fliter_title" v-if="index == 0 && checkSecondTabIndex == 4">状态</p>
            <div class="cate_button" v-if="index == 0 && checkSecondTabIndex == 4">
                <div class="cate_btn_box">
                    <button :class="finish ? 'active' : ''" @click="selectStatus(7)">已执行</button>
                </div>
                <div class="cate_btn_box">
                    <button :class="overdueFinish ? 'active' : ''"  @click="selectStatus(9)">已逾期执行</button>
                </div>
                
            </div> -->
        </div>
        <div class="footer_confirm">
            <button class="reset" :class="resetActive ? 'active' : ''" @click="resetFn">重置</button>
            <button class="confirm" :class="submitActive ? 'active' : ''" @click="submit">确认</button>
        </div>
        
        <div v-transfer-dom >
            <confirm v-model="show"
            class="filter_page_confirm"
            title="提示"
            confirm-text="取消"
            cancel-text="确认"
            :hide-on-blur="true"
            @on-cancel="onConfirm"
            @on-confirm="onCancel">
                <p style="text-align:center;">退出界面内容不会保存</p>
            </confirm>
        </div>
    </div>
</template>

<script>
import bus from '@/utils/eventBus'
// import myHeader from '@/components/common/header'
import { isEmptyObject } from '@/utils/index'
import {Confirm, TransferDomDirective as TransferDom} from 'vux'
import depTree from '@/components/common/tree'
import DeviceDao from '@/daos/device_dao'
let _this = null;
export default {
    directives:{
        TransferDom
    },
    components: {
        // myHeader,
        Confirm,
        depTree
    },
    props: {
        offsetTop: {
            type: Number,
            default: 45
        },
        index: {
            type: Number
        },
        checkSecondTabIndex: {
            type: Number
        },
        replaceSecondTabIndex: {
            type: Number
        },
        departmentId: {
            type: String
        },
        isFilterBackHome: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            name: '',
            device: '',
            component: '',
            deviceSelect: false,
            componentSelect: false,
            departmentSelect:false,
            finish: false,
            run: false,
            overdueFinish: false,
            stop: false,
            forbidden: false,
            checkType: [1],
            status: '',
            show: false,
            serverUrl: '',
            resetActive: false,
            submitActive: false,
            emptyData: false,
            isFocus: false,
            bodyHeight:null,
            isFocusDevice: false,
            isFocusComponent: false,
            recordStatusList:[],
            showSelection:true,
            deviceTypeId: -1,
            deviceTypeList:[]
        }
    },
    computed: {
        hadInput() {
            return this.name.length !== 0 || this.device.length !== 0 || this.component.length !== 0 || this.deviceSelect !== false || this.componentSelect !== false || this.finish !== false || this.overdueFinish !== false||this.departmentSelect!==false
        }
    },
    destroyed() {
        document.getElementsByTagName('body')[0].style.height = 'auto'
    },
    created() {
        _this = this;
    },
    mounted() {
        bus.$on('showConfirm', () => {
            this.show = true
        })
        if (this.index !== undefined && this.checkSecondTabIndex !== undefined && this.replaceSecondTabIndex !== undefined) {
            this.serverUrl = this.switchServerUrl(this.index, this.checkSecondTabIndex, this.replaceSecondTabIndex)
        }
        if (this.index !== undefined && this.checkSecondTabIndex == undefined && this.replaceSecondTabIndex == undefined) { //点巡检设置&&更换设置
            if (this.index == 0) {
                this.serverUrl = this.$API.checkSetRecordList
            } else {
                this.serverUrl = this.$API.replaceSetRecordList
            }
        }
        this.bodyHeight = this.bodyHeight =document.getElementsByTagName('html')[0].clientHeight
        this.getDeviceTypeList();
    },
    methods: {
        initPageHeight(n) {
            if (n == 1) {
                this.isFocusDevice = true
            }
            if (n == 2) {
                this.isFocusComponent= true
            }
            document.getElementsByTagName('body')[0].style.height = this.bodyHeight + 'px'
        },
        getFilterCondition() {
            let configStatusList=[];
            let status=this.status;
            this.status===''?configStatusList=[]:configStatusList=status.split(',');
            let statusList = this.getRecordStatusList();
            return {
                checkLeaderName: this.name,
                deviceComponentName: this.device,
                deviceComponentCode: this.component,
                checkTypeList: this.checkType,
                configStatusList: configStatusList,
                statusList: statusList,
                deviceTypeId: this.deviceTypeId
            }
        },
        getRecordStatusList() {
          if(this.checkSecondTabIndex == 1) {
            return [3];
          }
          if(this.checkSecondTabIndex == 2) {
            return [1];
          }
          if(this.checkSecondTabIndex == 3) {
            return [5];
          }
          if(this.checkSecondTabIndex == 4) {
            return this.recordStatusList;
          }
        },
        restColor() {
            this.isFocus = true
            this.emptyData = false
            this.initPageHeight()
            
        },
        resetFn() {
            this.resetActive = true
            setTimeout(() => {
                this.resetActive = false
            }, 200);
            this.reset()
        },
        reset() {
            this.name = ''
            this.device = ''
            this.component = ''
            this.deviceSelect = false
            this.componentSelect = false
            this.departmentSelect=false
            this.finish = false
            this.overdueFinish = false
            this.checkType = []
            this.status = ''
            this.run=''
            this.stop=''
            this.forbidden=''
            this.$emit('changeFilterCondition', this.getFilterCondition())
        },
        switchServerUrl(index, checkSecondTabIndex, replaceSecondTabIndex) {
            if (index == 0) {
                switch (checkSecondTabIndex) {
                    default:
                        return this.$API.getCheckList
                        break;
                }
            } else {
                switch (replaceSecondTabIndex) {
                    case 0:
                        return this.$API.getReplaceRecordByUser
                        break;
                    case 1: 
                        return this.$API.getReplaceRecordHandle
                        break;
                
                    default:
                        return this.$API.getReplaceRecordByUser
                        break;
                }
            }
        },
        select(n) {
            let arr=[]
            n===1?this.deviceSelect=!this.deviceSelect
            :n===2? this.componentSelect=!this.componentSelect
            :n===3?this.departmentSelect=!this.departmentSelect:''
            this.departmentSelect==true?arr.push(1):''
            this.deviceSelect==true?arr.push(2):''
            this.componentSelect==true?arr.push(3):''
            this.checkType=arr
        },
        selectStatus(n) {
            if (n == 7) {
                this.finish = !this.finish;
            }
            if (n == 9) {
                this.overdueFinish = !this.overdueFinish;
            }
            this.recordStatusList = [7,9];
            if(this.finish && !this.overdueFinish) {
              this.recordStatusList = [7];
            }else if(!this.finish && this.overdueFinish){
              this.recordStatusList = [9];
            }
            
        },
        selectStatus2(n) {
            if (n == 1) {
              this.run = !this.run;
            }
            
            if (n == 2){
                this.stop = !this.stop;
            }

            if (n == 3) {
                this.forbidden = !this.forbidden;
            }
            this.status = '';

            if(this.run) {
              this.status += ',1';
            }
            if(this.stop) {
              this.status += ',2';
            }
            if(this.forbidden) {
              this.status += ',3';
            }

            if(this.status.length !== 0) {
              this.status = this.status.slice(1);
            }
        },
        submit() {
            let filterCache = JSON.parse(localStorage.getItem("filterCache"));
            filterCache.deviceTypeId = this.deviceTypeId;
            localStorage.setItem("filterCache",JSON.stringify(filterCache));
            this.$emit('changeFilterCondition', this.getFilterCondition()) // 当点进来筛选，什么都不选择时，重置父组件条件
            this.submitActive = true
            setTimeout(() => {
                this.submitActive = false
            }, 200);

            let pageObj = {
                pageNum: 1,
                pageSize: 20,
                departmentId: filterCache.curDepartment.id,
                deviceTypeId: this.deviceTypeId!=-1?this.deviceTypeId:null,
            }
            let obj = Object.assign(pageObj, this.getFilterCondition());
            setTimeout(() => {
                 this.$emit('againResetMeScrollChild');
                 this.$emit('coloseFilterDialog');
            }, 200);
        },
        recovery() {
            this.isFocus = false
            this.isFocusDevice = false
            this.isFocusComponent = false
            window.scroll(0, 0);
        },
        onConfirm() {
            // console.log( this.$refs.header.fromPath)
            this.show = false
            if (this.isFilterBackHome) {
                console.log(this.isFilterBackHome)
                bus.$emit('backHomepage')
            }
            setTimeout(() => {
                this.$emit('coloseFilterDialog')
                this.$emit('changeRefrehCheckComponent')
            }, 300);
        },
        onCancel() {
            this.show = false
        },
        chooseDeviceType(){
            let val = document.getElementById("device-option").value;
            this.deviceTypeId = val;
        },
        getDeviceTypeList: function(){
            let _this = this;
            DeviceDao.getAllDeviceTypeList(data=>{
                if(data){
                    _this.deviceTypeList = data;
                }
            });
        },
        setDefaultValue(){
            let filterCache = JSON.parse(localStorage.getItem("filterCache"));
            if(filterCache){
                _this.deviceTypeId = filterCache.deviceTypeId; 
                document.getElementById("device-option").value = filterCache.deviceTypeId;
            }else{
                _this.deviceTypeId = -1;
            }
        }
    },
    watch: {
        name: {
            handler() {
                this.$emit('changeFilterCondition', this.getFilterCondition())
                this.$emit('initHadInput', this.hadInput)
            }
        },
        device: {
            handler() {
                this.$emit('changeFilterCondition', this.getFilterCondition())
                this.$emit('initHadInput', this.hadInput)
            }
        },
        component: {
            handler() {
                this.$emit('changeFilterCondition', this.getFilterCondition())
                this.$emit('initHadInput', this.hadInput)
            }
        },
        checkType: {
            handler() {
                this.$emit('changeFilterCondition', this.getFilterCondition())
                this.$emit('initHadInput', this.hadInput)
            }
        },
        status: {
            handler() {
                this.$emit('changeFilterCondition', this.getFilterCondition())
                this.$emit('initHadInput', this.hadInput)
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .filter_page_box{
        background: #22233F;
        position: relative;
        .filter_content{
            padding: 0 16px;
            height: 100%;
            overflow-y: auto;
            .fliter_title{
                font-size: 17px;
                color: #fff;
                padding: 20px 0 12px;
            }
            .name_search{
                position: relative;
                background: #292A4D;
                transition: all 0.3s ease-in-out;
                &.active{
                    background: #383A69
                }
                .name_search_icon{
                    position: absolute;
                    left: 6px;
                    top: 50%;
                    transform: translate(0, -50%);
                    color: rgba(255,255,255,0.6);
                }
                .name_input{
                    line-height: 20px;
                    padding: 12px 30px;
                    font-size: 15px;
                    color: #fff;
                    &::-webkit-input-placeholder{
                        font-size: 15px!important;
                        color: rgba(255,255,255,0.6)!important;
                        text-align: left!important;
                        line-height: 20px!important;
                    }
                    &.noSearchData{
                        color: #FA0000;
                    }
                }
            }
            .device_info_input{
                .device_input{
                    width: 100%;
                    line-height: 20px;
                    padding: 12px 8px;
                    font-size: 15px;
                    color: #fff;
                    background: #292A4D;
                    transition: background 0.3s ease-in-out;
                    &::-webkit-input-placeholder{
                        font-size: 15px!important;
                        color: rgba(255,255,255,0.6)!important;
                        text-align: left!important;
                        line-height: 20px!important;
                    }
                    &:first-child{
                        margin-bottom: 12px;
                    }
                    &:focus{
                        background: #383A69
                    }
                }
            }
            .cate_button{
                display: flex;
                .cate_btn_box{
                    flex: 1;
                    &:first-child{
                        padding-right: 6px;
                    }
                    &:last-child{
                        padding-left: 6px;
                    }
                    button{
                        width: 100%;
                        padding: 4px 0;
                        border: none;
                        outline: none;
                        border:1px solid rgba(69,109,230,1);
                        border-radius: 2px;
                        font-size: 14px;
                        color: #456DE6;
                        background: transparent;
                        &.active{
                            background: #456DE6;
                            color: #fff;
                        }
                    }
                }
            }
        }
        .footer_confirm{
            display: flex;
            // border-top: 1px solid rgba(69,109,230,1);
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            button{
                outline: none;
                border: none;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                transition: all 0.3s ease-in-out;
            }
            .reset{
                width: 135px;
                background: transparent;
                color: #456DE6;
                border-top: 1px solid rgba(69,109,230,1);
                &.active{
                    background: #456DE6;
                    color: #fff;
                }
            }
            .confirm{
                flex: 1;
                background: #456DE6;
                color: #fff;
                border-top: 1px solid rgba(69,109,230,1);
                &.active{
                    background: #6E92FF;
                }
            }
        }
    }
    .device_type{
        font-size: 17px;
        color: #fff;
        padding: 20px 0 12px;
        display:flex;
        justify-content: space-between;
        align-items: center;
        .iu-select{
            height: 36px;
            width: 70%;
            padding: 2px 4px;
            border: none;
            outline: none;
            border:1px solid rgba(69,109,230,1);
            border-radius: 2px;
            font-size: 16px;
            color: #456DE6;
            background: transparent;
            option{
                background: rgba(255, 255, 255, 0.9);
            }
        }
    }
    
</style>
